<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>animation_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
        div{position:absolute;top:50%;left:50%;overflow:hidden;width:300px;height:150px;margin:-75px 0 0 -150px;border:3px solid #eee;background:#e0e0e0;}
        span{display:block;height:50px;font:bold 14px/50px Georgia;}
        .a1{
            -webkit-transform:translate(60px);
            -moz-transform:translate(60px);
            transform:translate(60px);
            -webkit-animation:animations 2s ease-out forwards;
            -moz-animation:animations 2s ease-out forwards;
            animation:animations 2s ease-out forwards;
        }
        @-webkit-keyframes animations{
            0%{-webkit-transform:translate(0);opacity:0;}
            50%{-webkit-transform:translate(30px);opacity:1;}
            70%{-webkit-transform:translate(35px);opacity:1;}
            100%{-webkit-transform:translate(60px);opacity:0;}
        }
        @-moz-keyframes animations{
            0%{-moz-transform:translate(0);opacity:0;}
            50%{-moz-transform:translate(30px);opacity:1;}
            70%{-moz-transform:translate(35px);opacity:1;}
            100%{-moz-transform:translate(60px);opacity:0;}
        }
        @keyframes animations{
            0%{transform:translate(0);opacity:0;}
            50%{transform:translate(30px);opacity:1;}
            70%{transform:translate(35px);opacity:1;}
            100%{transform:translate(60px);opacity:0;}
        }
        .a3{
            opacity: 0;
            -webkit-transform:translate(100px);
            -moz-transform:translate(100px);
            transform:translate(100px);
            -webkit-animation:animations3 2s ease-out 2s forwards;
            -moz-animation:animations3 2s ease-out 2s forwards;
            animation:animations3 2s ease-out 2s forwards;
        }
        @-webkit-keyframes animations3{
            0%{-webkit-transform:translate(160px);opacity:0;}
            50%{-webkit-transform:translate(130px);opacity:1;}
            70%{-webkit-transform:translate(125px);opacity:1;}
            100%{-webkit-transform:translate(100px);opacity:0;}
        }
        @-moz-keyframes animations3{
            0%{-moz-transform:translate(160px);opacity:0;}
            50%{-moz-transform:translate(130px);opacity:1;}
            70%{-moz-transform:translate(125px);opacity:1;}
            100%{-moz-transform:translate(100px);opacity:0;}
        }
        @keyframes animations3{
            0%{transform:translate(160px);opacity:0;}
            50%{transform:translate(130px);opacity:1;}
            70%{transform:translate(125px);opacity:1;}
            100%{transform:translate(100px);opacity:0;}
        }
        .a2{
            opacity: 0;
            text-align:center;font-size:26px;
            -webkit-animation:animations2 5s ease-in-out 4s forwards;
            -moz-animation:animations2 5s ease-in-out 4s forwards;
            animation:animations2 5s ease-in-out 4s forwards;
        }
        @-webkit-keyframes animations2{
            0%{opacity:0;}
            40%{opacity:.8;}
            45%{opacity:.3;}
            50%{opacity:.8;}
            55%{opacity:.3;}
            60%{opacity:.8;}
            100%{opacity:0;}
        }
        @-moz-keyframes animations2{
            0%{opacity:0;}
            40%{opacity:.8;}
            45%{opacity:.3;}
            50%{opacity:.8;}
            55%{opacity:.3;}
            60%{opacity:.8;}
            100%{opacity:0;}
        }
        @keyframes animations2{
            0%{opacity:0;}
            40%{opacity:.8;}
            45%{opacity:.3;}
            50%{opacity:.8;}
            55%{opacity:.3;}
            60%{opacity:.8;}
            100%{opacity:0;}
        }
    </style>
</head>
<body>
<div>
    <span class="a1">CSS3 Animations</span>
    <span class="a2">CSS3 Animations</span>
    <span class="a3">CSS3 Animations</span>
</div>
</body>
</html>

